<template>
    <div class="header-container">
        <nav class="header-nav" ref="head_nav">
            <el-row  :gutter="24">
                <el-col class="hidden-sm-and-down" :xl="12" :lg="16" :md="18" >
                    <div class="clearfix">
                        <li v-for="(item, index) in nav" :key="index" @click="routerLink(index, item.path)">
                            <span :class=" navIndex === index ? 'active' : ''">
                            {{ item.title }}
                            </span>
                        </li>
        
                        <li>
                            <i @click="searchBlogIcon" class="head-i el-icon-search"></i>
                        </li>
                    </div>
                </el-col>
                <!-- 缩小后 -->
                <el-col class="hidden-md-and-up" :sm="16" :xs="10">
                    <div class="menuBtn">
                        <li  @click="disPlayMenu()"><i class="head-i el-icon-s-unfold"></i></li>
                        <li><i @click="searchBlogIcon" class="head-i el-icon-search"></i></li>
                    </div>
                    <transition name="display" appear>
                    <div v-show="isMenu" style="color:white;" class="aside-menu" @click="openAndClose()">
                        <ol v-for="(item, index) in nav" :key="index" @click="routerLink(index, item.path)">
                            <span :class=" navIndex === index ? 'active' : ''">
                            {{ item.title }}
                            </span>
                        </ol>     
                    </div>
                </transition>
                </el-col>
                <el-col :xl="12" :lg="8" :md="6" :sm="8" :xs="14">
                    <div class="register_login">
                        <li>
                            <i @click="changeDark()" v-show="isSunny" class="head-i el-icon-sunny"></i>
                            <i @click="changeLight()"  v-show="isMoon" class="head-i el-icon-moon"></i>
                        </li>
                        
                            <li @click="goLogin()" v-show="!userInfo">登录</li>
                            <li @click="goRegister()" v-show="!userInfo">注册</li>
                    
                            <li v-show="userInfo">欢迎您:{{ userInfo.username }}</li>
                            <span v-show="userInfo" class="logout" @click="logout()">退出</span>
                    </div>
                </el-col>
            </el-row>
        </nav>
        <el-dialog
            title="站内搜索"
            :visible.sync="dialogVisible"
            width="80%"
            :before-close="handleClose"
            :append-to-body='true'
            >
            <div class="search-inp">
                <el-input v-model="keyWord" placeholder="请输入关键字"></el-input>
                <el-button @click="serachBlogs">搜索</el-button>
            </div>
            <div class="blog-content">
                <el-card v-if="this.searchedblogs == ''">
                    暂无数据
                </el-card>
                <el-card v-else class="box-card">
                    <div  class="vip-body">
                        <el-row :gutter="24" class="myrow">
                            <div v-for="bl in searchedblogs" :key="bl.id"  @click="goArticle(bl.id)" >
                            <el-col class="mycol" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
                            <div class="blog_vip">
                                <div class="left">
                                <div class="img-container">
                                    <img :src="bl.blogface" alt="">
                                </div>
                                </div>
                                <div class="right">
                                <div class="rightTitle">{{ bl.title }}</div>
                                <div class="rightContent">{{ bl.content }}</div>
                                <div class="date">{{ bl.create_time.slice(0,10) }}</div>
                                </div>
                            </div>
                            </el-col>
                            </div>
                        </el-row>
                    </div>
                </el-card>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {logout} from '@/api/user'
import {searchBlogsApi} from '@/api/blog'
export default{
    name:'myHead',
    template:'#template-group',
    data(){
        return {
            nav:[
                {title:'首页',path:'/'},
                {title:'新闻',path:'/news/wbnews'},
                {title:'关于',path:'/about'},
                {title:'论坛',path:'/forum'},
                {title:'文章发布',path:'/publicblog'},
                {title:'后台管理',path:'/managehome'}
            ],
            navIndex: Number(localStorage.getItem("nav_bar")) || 0,
            isMenu:false,
            isSunny: false,
            isMoon:false,
            userInfo:false,
            dialogVisible: false,
            keyWord:'',
            searchedblogs:''
        }
    },
    created() {
    let theme = localStorage.getItem('theme') ? JSON.parse(localStorage.getItem('theme')) : 'light'
    document.documentElement.setAttribute('theme', theme)
    localStorage.setItem('theme',JSON.stringify(theme))
    if(theme=='light'){
        this.isSunny = true   
        this.isMoon = false
    }else{
        this.isSunny = false     
        this.isMoon = true
    }
    
  },
    mounted() {
        // 滚动监听
        window.addEventListener('scroll',this.handleScroll,true)
        // 判断是否登录
        if(JSON.parse(localStorage.getItem('userInfo'))){
            this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
        }else{
            this.userInfo = false
        }
  },
    methods:{
        handleScroll(){
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if(scrollTop>60){
            this.$refs['head_nav'].style.background = 'var(--cardColor)';
            this.$refs['head_nav'].style.color = 'var(--font_1)';
        }else{
            this.$refs['head_nav'].style.background = 'none';
            this.$refs['head_nav'].style.color = 'white';
        }
        },
        changeLight() {
        document.documentElement.setAttribute('theme', 'light')
        localStorage.setItem('theme', JSON.stringify('light'))
        this.isSunny = true
        this.isMoon = false
        },
        changeDark() {
        document.documentElement.setAttribute('theme', 'dark')
        localStorage.setItem('theme', JSON.stringify('dark'))
        this.isSunny = false
        this.isMoon = true
        },
        routerLink(index, path) {
        localStorage.setItem("nav_bar",index)
        // 点击哪个路由就赋值给自定义的下下标
        this.navIndex = index;
        // 路由跳转
        this.$router.push(path)
        },
        checkRouterLocal(path) {
        // 查找当前路由下标高亮
        this.navIndex = this.nav.findIndex(item => item.path === path);
        },
        // 去登陆页面
        goLogin(){
            this.$router.push('/login')
        },
        // 去注册页面
        goRegister(){
            this.$router.push('/register')
        },
        disPlayMenu(){
            console.log(123);
            this.isMenu = true
        },
        openAndClose(){
            this.isMenu = !this.isMenu
            this.searchedblogs = ''
            this.keyWord = ''
        },
        // 搜索功能
        searchBlogIcon(){
            this.dialogVisible=true
        },
        handleClose(done) {
        this.$confirm('确认关闭？')
            .then(_ => {
                this.dialogVisible=false
            this.searchedblogs = ''
            this.keyWord = ''
              done();
            })
            .catch(_ => {});
        },
        async serachBlogs(){
            const data = {'keyword':this.keyWord}
            await searchBlogsApi(data).then(res=>{
                this.searchedblogs = res.data.blogs
            })
        },
        // 展示博客
        goArticle(blog_id){
            this.dialogVisible=false
                this.searchedblogs = ''
                this.keyWord = ''  
            this.$router.push({    
                
                path: `/dispalyarticle/${blog_id}`

            });
        },
        // 退出登录
        logout(){
            this.$confirm('此操作将退出登录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(async () => {
                const res = await logout()
                if(res.data.code == 200){
                    this.$router.push('/home')
                    this.userInfo = false
                }else{
                    this.$message.error('res.data.msg')
                }
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消退出'
            });          
            });
        }
    }
}
</script>
<style lang="less" scoped>
.header-container{
    // 头部导航
    .header-nav{
        height: 60px;
        padding: 0 2rem 0 2rem;
        font-size: 16px;
        color: white;
        li{
            height: 60px;
            float: left;
            margin-right: 21px;
            line-height: 60px;
        }
    }
    
    // 退出登录
    .logout{
        cursor: pointer;
    }
    // 登录注册
    .register_login{
        height: 60px;
        float: right;
        margin-right: 21px;
        line-height: 60px;
    }
    .menuBtn{
        height: 60px;
        line-height: 60px;
    }
    .aside-menu{
        animation-name: display;
        animation-timing-function: ease;
        padding-top: 40px;
        height: 100vh;
        width:18rem;
        background: rgba(0, 0,0, .7);
        position: fixed;
        top: 0px;
        left: 0%;
        ol{
            cursor: pointer;
        }
        ol:hover{
            background-color:rgba(0, 0,0, .7);
            color: rgba(0, 0,0, .7);
        }
    }
    // 背景颜色
    .bg-purple-dark {
    background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    // 统一i标签
    .head-i{
        font-size: 24px;
        line-height: 60px;
    }
}
</style>
<style scoped>
.display-enter-active, .display-leave-active{
    transition: 0.2s linear;
}
.display-enter{
    transform: translate(-100%);
}
.display-enter-to{
    transform: translate(0);
}
.display-leave{
    transform: translate(0);
}
.display-leave-to{
    transform: translate(-100%);
}
.active{
    color: rgb(2, 175, 255);
}

</style>

<style lang="less" scoped>
// dialog单独
.search-inp{
        display: flex;
        justify-content: space-around;
        el-input{
            width: 50%;
        }
        el-button{
            width: 20%;
        }
    }
    .vip-body{
          .mycol{
            padding: 0% !important;
          }
          .myrow{
            margin: 0% !important;
          }
          .blog_vip:nth-child(odd){
            
          }
          .blog_vip:nth-child(even){
            border-left:1px solid var(--cardLine);
          }
      .blog_vip {
        cursor: pointer;
        height: 110px;
        display: flex;
        justify-content: space-around;
        .left{
          width: 40%;
          padding: 10px;
          .img-container{
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            border-radius: 5px;
            img{
              width: auto;
              height: auto;
              //如果图片比例不为一比一 则可以适当增加比例以满足充满盒子
              max-width: 180%;
              max-height: 180%;
              transition:  all .3s;
            }
            img:hover{
              transform: scale(1.2,1.2);
            }
          }
        }
        .right{
          width: 60%;
          padding: 10px;
          .rightTitle{
          width: 100%;
          font-weight: bold;
          overflow:hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow:ellipsis;
          font-size: 18px;

          }
          .rightContent{
            width: 100%;
            overflow:hidden;
            font-size: 16px;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            text-indent:2em;
          }
          .date{
            font-size: 16px;
          }
        }
      }
        }

</style>